<template>
	<view class="content">
		<view class="money_box">
			<view class="label">支付金额</view>
			<view class="price">
				<text class="fuhao">￥</text>
				<text>{{data.allprice}}</text>
			</view>
			<view class="bot">
				<text class="label">项目名称</text>
				<text>{{data.name}}</text>
			</view>
		</view>
		<view class="pay_type">
			
			<!-- #ifdef APP -->
			<view class="item" @click="paytype=0">
				<view class="l">
					<image class="img" src="/static/index/zfb.png" mode=""></image>
					<text>支付宝支付</text>
				</view>
				<image v-if="paytype === 0" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<view class="item" @click="paytype=1">
				<view class="l">
					<image class="img" src="/static/index/wx.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<image v-if="paytype === 1" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="item" @click="paytype=2">
				<view class="l">
					<image class="img" src="/static/index/wx.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<image v-if="paytype === 2" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="item" @click="paytype=3">
				<view class="l">
					<image class="img" src="/static/index/wx.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<image v-if="paytype === 3" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<!-- #endif -->
			<view class="item" @click="paytype=4">
				<view class="l">
					<image class="img" src="/static/index/yue.png" mode=""></image>
					<text>余额支付(余额：{{data.money}})</text>
				</view>
				<image v-if="paytype === 4" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
		</view>
		<bottomBtn text="立即付款" @click="confirm"></bottomBtn>
	</view>
</template>

<script>
	import bottomBtn from '@/components/bottom_btn/bottom_btn.vue'
	export default {
		components:{
			bottomBtn
		},
		data() {
			return {
				paytype:'',
				payTypeList:[
					{name:'余额',icon:'/static/index/yue.png'},
					{name:'微信',icon:'/static/index/wx.png'},
					{name:'支付宝',icon:'/static/index/zfb.png'},
				],
				data: ''
			}
		},
		onLoad(option) {
			this.data = JSON.parse(option.data)
			
			// #ifdef APP
			this.paytype = 1
			// #endif
			// #ifdef MP
			this.paytype = 2
			// #endif
			// #ifdef H5
			this.paytype = 3
			// #endif
		},
		methods: {
			confirm(){
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				this.$api.post('/bupay', {
					...this.data,
					paytype: this.paytype
				}).then(res => {
					if (res.code == 1) {
						this.$pay(res.data).then(res => {
							uni.hideLoading();
							uni.switchTab({
								url:'/pages/order/order'
							})
						}).catch(e => {
							uni.hideLoading();
						})
					}
				}).catch((res) => {
					uni.hideLoading();
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F6F7FB;
}
.money_box{
	width: 686rpx;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 30rpx auto 0;
	.label{
		font-size: 24rpx;
		color: #8D93A5;
		margin: 45rpx 0 25rpx;
	}
	.price{
		color: #E91919;
		font-size: 64rpx;
		font-weight: bold;
		.fuhao{
			font-size: 28rpx;
		}
	}
	
	.bot{
		width: 622rpx;
		height: 140rpx;
		border-top: 1rpx dashed #DADADA;
		margin-top: 66rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #1C274C;
		.label{
			color: #8D93A5;
		}
	}
}
.pay_type{
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 686rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 52rpx;
		box-sizing: border-box;
		margin: 30rpx auto 0;
		.l{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			.img{
				width: 42rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}
		}
		.selectImg{
			width: 32rpx;
			height: 32rpx;
		}
	}
}
</style>
